<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<view class="header">
			<image src="../../static/images/arrow_left.png" mode="" @click="goback"></image>

			<view class="header-b">
				<view class="box" style="color:#249af6; background-color: #FFFFFF;">交易</view>
				<view class="box" @tap="$open('arrears')">欠数</view>
				<view class="box" @tap="$open('income')">收支</view>
				<view class="box" @tap="$open('stock')">库存</view>
			</view>
		</view>

		<view class="classify">
			<view class="classify-l f32 c333" @click="showdow()">
				{{ time }}
				<image src="../../static/slice/1.png" mode=""></image>
			</view>
			<view class="classify-l f32 c333" @click="ShowUser()">
				{{ msg }}
				<image src="../../static/slice/1.png" mode=""></image>
			</view>
			<view class="classify-l f32 c333" @click="showHuo()">
				{{ huopin=='' ? '货品' : huopin }}
				<image src="../../static/slice/1.png" mode=""></image>
			</view>
		</view>
		<!-- 交易下拉 -->
		<view class="combobox" :class="detalClass" @tap="hideDetal">
			<view class="content">
				<view class="show-li f30 c333" :class="itemIndex == index ? 'active' : ''" v-for="(item, index) in dealList" :key="index" @tap="detalClick(item.name, index,item.type)">
					{{ item.name }}
				</view>
			</view>
		</view>

      <!-- 全部员工 -->
		<view class="combobox" :class="userClass" @tap="hideUser">
			<view class="content">
				<view class="show-li" @click="all">全部员工</view>
				<view class="show-li" v-for="(item, index) in userArr" :key="index" :class="itemIndex == index ? 'active' : ''" @click="useename(item, index)">
					{{ item.name }}{{ item.is_boss == 1 ? '(老板）' : '' }}
				</view>
			</view>
		</view>
		
		
		<view class="combobox" :class="goodsClass" @tap="hideGoods">
			<view class="content">
				<view class="show-li" v-for="(item, index) in goods" :class="itemIndex == index ? 'active' : ''" :key="index" @tap="goodsClick(index,item.name,item.type)">{{ item.name }}</view>
			</view>
		</view>
		<view class="computer">
			<view class="computer-l ">
				<view class="com-l">销售量</view>
				<view class="com-l">交易额</view>
			</view>

			<view class="computer-l">
				<view class="com-l red">{{ productTotal.sale_num }}</view>
				<view class="com-l red">￥{{ productTotal.trade_sum }}</view>
			</view>
		</view>
		<view class="shop" v-for="(item,index) in productList" :key="index" @tap="goDetail(item.goods_id)">
			<view class="shoptop" >
				<view class="pic">
					<image :src="item.cover"></image>
				</view>
				<view class="shopCenter">
					<view class="txt">{{item.title}}</view>
					<view class="txtTwo">
						销售量：{{item.sale_num}}
						<text>交易额：¥{{item.trade_sum}}</text>
					</view>
				</view>
				<view class="shopBot"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
			</view>
		</view>
		
		
		<!-- 日历选择弹窗 -->

		<uni-popup ref="popup" type="center">
			<view class="dateBox">
				<view class="dateCont">
					<view class="title">
						<view class="timeName f36 C333">选择时间</view>
						<view class="allTime f32 " @tap="allTime(0)">全部时间</view>
					</view>
					<view class="date-item">
						<view class="name f32 c666">开始时间</view>
						<view class="number f32 c333">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="starDateChange">{{ startDates=='' ? date: startDates }}</picker>
						</view>
					</view>
					<view class="date-item">
						<view class="name f32 c666">结束时间</view>
						<view class="number f32 c333">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="endDateChange">{{ endDates == '' ? date : endDates}}</picker>
						</view>
					</view>

					<view class="btn">
						<view class="f32 c666" @click="cancel">取消</view>
						<view class="f32 define" @click="define()">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import {baseUrl} from '../../common/config.js';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniIcons,
		uniCollapse,
		uniCollapseItem,
		uniPopup
	},

	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			show: true,
			showtru: true,
			type: 0,
			user: false,
			userArr: [],
			msg: '全部员工',
			time: '今日数据',
			ke: false,
			huopin: '',
			type1: 1,
			page_size: 15,
			days: 0,
			uid: '',
			itemIndex: '',
			detalClass: '', //交易控制css开关
			dealList: [
				{
					name: '今日数据',
					type:1
				},
				{
					name: '昨天数据',
					type:2
				},
				{
					name: '7日数据',
					type:7
				},
				{
					name: '30日数据',
					type:30
				},
				{
					name: '日历',
					type:-1
					
				},
				{
					name: '全部交易',
					type:0
				}
			], //交易下拉
			userClass: '', //用户控制css开关
			goods: [
				{
					name: '货品',
					type:1
				},
				{
					name: '客户',
					type:2
				}
			],
			goodsType:'', //货品type
			date: currentDate,
			goodsClass: '', //货品css开关
			startDates: '', //开始时间
			endDates: '', //结束时间
			trade_sum: '', //交易额
			sale_num: '', //销售量
			goods_id: '', //商品id
			title: '', //标题
			cover: '', //图片
			goods_no: '', //标号
			sale_num2: '', //商品销售量
			productTotal:{},
			productList:[] //商品列表
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},
		baseUrl(){
			return baseUrl
		}
	},
	created() {
		 console.log(this.baseUrl)
	},
	
	onLoad() {
		this.userIndex();
		this.getProducts()
	},
	methods: {
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		showdow() {
			// this.ke = false;
			// this.user = false;
			// if (this.show) {
			// 	this.show = false;
			// } else {
			// 	this.show = true;
			// }
			this.detalClass = 'show';
			this.userClass = 'hide';
			this.goodsClass = 'hide';
		},
		starDateChange(e) {
			console.log(e);
			this.startDates = e.detail.value;
		},
		endDateChange(e) {
			console.log(e);
			this.endDates = e.detail.value;
		},
		detalClick(name, index,type) {
			this.time=name,
			this.itemIndex = index;
			if (name == '日历') {
				this.time='时间段数据';
				this.$refs.popup.open();
				
			}
			this.days=type
			if (type == 1) {
				this.time = '今日数据';
				this.days = 1;
			this.getProducts();
			if(this.productList.length==0){
				this.$sToast('没有更多数据了')
			}
			}
			if (type == 2) {
				this.time = '昨日数据';
				this.days = 2;
				this.getProducts();
				if(this.productList.length==0){
					this.$sToast('没有更多数据了')
				}
			}
			if (type == 7) {
				this.time = '七日数据';
				this.days = 7;
				this.getProducts();
				if(this.productList.length==0){
					this.$sToast('没有更多数据了')
				}
			}
			if (type== 30) {
				this.time = '30日数据';
				this.days = 30;
				this.getProducts();
				if(this.productList.length==0){
					this.$sToast('没有更多数据了')
				}
			}
			if (type == 0) {
				this.time = '全部交易';
				this.days = 0;
				this.getProducts();
				if(this.productList.length==0){
					this.$sToast('没有更多数据了')
				}
			}
		
		},
		allTime(e){
			this.time = '全部交易';
			this.days = e;
			this.getProducts();
			this.cancel()
		},
		hideDetal() {
			this.detalClass = 'hide';
		},
		hideUser() {
			this.userClass = 'hide';
		},
		goodsClick(index,name,type) {
			this.itemIndex = index;
			this.huopin=name
			this.goodsType=type
			if(type==1){
				this.huopin='货品'
				this.goodsType=1
			}
			if(type==2){
				this.huopin='客户'
				this.goodsType=2
			}
			this.getProducts();
			if(this.productList.length==0){
				this.$sToast('没有更多数据了')
			}
		
			
		},
		define(){
			this.startDates=this.startDates=='' ? this.date : this.startDates,
			this.endDates=this.endDates == '' ? this.date : this.endDates,
			this.$refs.popup.close();
			this.getProducts();
		},
		showtrue(e) {
			this.type = e;
			this.show = true;
	
		},
		ShowUser() {
			// this.user = !this.user;
			// this.show = true;
			// this.ke = false;
			// console.log(123);
			this.userClass = 'show';
			this.detalClass = 'hide';
			this.goodsClass = 'hide';
		},
		hideGoods() {
			this.goodsClass = 'hide';
		},
		userIndex() {
			this.$ajax('api/v1.user/index', {}, 'GET').then(res => {
				this.userArr = res.result;
			});
		},
		useename(e,index) {
			// console.log(e);
			this.msg = e.name;
			this.uid = e.user_id;
			this.itemIndex = index;
			this.getProducts();
		if(this.productList.length==0){
			this.$sToast('没有更多数据了')
		}
		},
		all() {
			this.msg = '全部员工';
			this.uid = 0;
			this.getProducts();
			if(this.productList.length==0){
				this.$sToast('没有更多数据了')
			}
		},
		Huo(e) {
			this.ke = false;
			if (e == 0) {
				this.huopin = '货品';
				this.type1 = 1;
			} else {
				this.huopin = '客户';
				this.type1 = 2;
			}
			this.getProducts();
			
		},
		showHuo() {
			// this.ke = !this.ke;
			// this.user = false;
			// this.show = true;
			this.goodsClass = 'show';
			this.detalClass = 'hide';
			this.userClass = 'hide';
		},
		cancel() {
			this.$refs.popup.close();
		},
		deal() {
			this.$ajax('curriculum/getCurriculumList', {
				type
			})
				.then(res => {})
				.catch(res => {
					console.log(Error);
				});
		},
		// allSuccess() {
		// 	this.$ajax('api/v1.statistics/account', {
		// 		type: this.type1,
		// 		page_size: this.page_size,
		// 		days: this.days,
		// 		uid: this.uid
		// 	})
		// 		.then(res => {
		// 			console.log(res);
		// 			this.trade_sum = res.result.total.trade_sum;
		// 			this.sale_num = res.result.total.sale_num;
		// 		})
		// 		.catch(res => {
		// 			console.log(Error);
		// 		});
		// },
		goback() {
			uni.navigateBack({
				delta: 1
			});
		},
		getProducts(){
			let that=this;
			that.$ajax('api/v1.statistics/account',{
			days:that.days,
			user_id:that.uid,
			start_time:that.startDates,
			end_time: that.endDates,
			type:that.goodsType=='' ? 1: that.goodsType,
			page_size:15
			}).then(res=>{
				if(res.code==1){
					that.productTotal=res.result.total
					that.productList=res.result.page_list
				}
			}).catch(res=>{
				that.$sToast(res.message)
			})
		},
		goDetail(id){
			uni.navigateTo({
				url:'../shopMall/OweCargoDetails?id='+id
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.header {
	background-color: #249af6;
	padding: 70rpx 30rpx 20rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	image {
		width: 21rpx;
		height: 38rpx;
	}
	.header-b {
		width: 441rpx;
		height: 59rpx;
		border: 2rpx #ffffff solid;
		margin: 0 auto;
		display: flex;

		.box {
			width: 25%;
			text-align: center;
			border-right: 2rpx solid #ffffff;
			color: #ffffff;
			font-size: 32rpx;
			line-height: 58rpx;
			font-family: PingFang SC;
			&:last-child {
				border-right: none;
			}
		}
	}
}
.seach {
	width: 750rpx;
	height: 107rpx;
	background: rgba(0, 130, 232, 1);
	padding-left: 32rpx;
	display: flex;

	.seach-s {
		width: 613rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 99999rpx;
		padding-left: 27rpx;
		display: flex;
		padding-top: 16rpx;
		input {
			border-style: none;
			padding-left: 34rpx;
		}
	}
	.seach-e {
		image {
			width: 44rpx;
			height: 44rpx;
			margin-top: 12rpx;
			margin-left: 10rpx;
		}
	}
}
.classify {
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: 32rpx;
	color: #333;
	color: rgba(51, 51, 51, 1);
	background-color: #ffffff;
	height: 75rpx;
	line-height: 75rpx;
	image {
		width: 17rpx;
		height: 10rpx;
		margin-left: 20rpx;
		vertical-align: middle;
	}
}
.ima {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 227rpx;
}

.computer {
	width: 100%;
	background-color: #ffffff;
	padding: 40upx 30rpx;
	box-sizing: border-box;
	margin: 20upx 0;
	.computer-l {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
}
.red {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(246, 68, 68, 1);
}
.combobox {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	position: fixed;
	font-size: 30rpx;
	z-index: 2;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 48rpx;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	&.show {
		display: block;
	}
	&.hide {
		display: none;
	}
	.content {
		background-color: $white-background;
		.show-li {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 2rpx solid #f7f7f7;
			padding-left: 30rpx;
			&.active {
				color: #249af6;
				background: url('../../static/slice/gou.png') no-repeat right 40upx center;
				background-size: 38upx 32upx;
			}
			image {
				width: 38rpx;
				height: 32rpx;
				margin: 50rpx;
				float: right;
			}
		}
	}
}
.show {
	display: none;
}

.showtrue {
	display: none;
}
.shop {
	background-color: #f6f5f8ff;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	.shoptop {
		height: 211rpx;
		width: 100%;
		display: flex;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		image {
			width: 130rpx;
			height: 130rpx;
			margin: 40rpx 28rpx;
		}
		.shopCenter {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin-top: 40rpx;
			.txtTwo {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(246, 68, 68, 1);
				margin-top: 57rpx;
				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
					margin-left: 99rpx;
				}
			}
		}
		.shopBot {
			image {
				width: 18rpx;
				height: 33rpx;
				position: absolute;
				top: 60rpx;
				right: 29rpx;
			}
		}
	}
}
.dy {
	padding: 0 30rpx;
}

// 日期选择弹窗

.dateBox {
	width: 700rpx;
	padding: 0 50upx;
	box-sizing: border-box;
	border-radius: 10rpx;
	.dateCont {
		background-color: $white-background;
		.title {
			text-align: center;
			position: relative;
			padding: 30rpx;
			border-bottom: 2rpx #eeee solid;
			.allTime {
				color: #f64444;
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
		}
		.date-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 2rpx #f7f7f7 solid;
			padding: 30rpx;
			&:last-child {
				border-bottom: none;
			}
		}
		.btn {
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 30rpx 0;
			view {
				width: 50%;
				text-align: center;
			}
			.define {
				color: #249af6;
			}
		}
	}
}
</style>
